<template>
    <div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>单位名称</label>
                <i class="iconfont icon-required"></i>
            </div>
            <div class="equipment-right-select"
                 @click="companyPropShow = true"
                 v-if="userInfo.departsir != '1'">
                <span>{{deptname?deptname:'请选择'}}</span>
                <i class="iconfont icon-jinru rightmsg"></i>
            </div>
            <div class="equipment-right-select"
                 v-else>
                <span>{{deptname}}</span>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>区域</label>
                <i class="iconfont icon-required"></i>
            </div>
            <div class="equipment-right-select"
                 @click="selectAreaPropShow = true">
                <span>{{areaName?areaName:'请选择'}}</span>
                <i class="iconfont icon-jinru rightmsg"></i>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>职业病危害因素</label>
                <i class="iconfont icon-required"></i>
            </div>
            <div class="equipment-right-select"
                 @click="factorsPropShow = true">
                <span>{{harmvalue?harmvalue:'请选择'}}</span>
                <i class="iconfont icon-jinru rightmsg"></i>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>采样/测量地点</label>
                <i class="iconfont icon-required"></i>
            </div>
            <div>
                <input type="text"
                       placeholder="请输入"
                       v-model="CheckAddress">
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>开始监测时间</label>
                <i class="iconfont icon-required"></i>
            </div>
            <group>
                <datetime v-model="startDate"></datetime>
            </group>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>结束监测时间</label>
                <i class="iconfont icon-required"></i>
            </div>
            <group>
                <datetime v-model="endDate"></datetime>
            </group>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>测量指标</label>
                <i class="iconfont icon-required"></i>
            </div>
            <div>
                <input type="text"
                       placeholder="请输入"
                       v-model="CheckIndex">
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>测量值</label>
                <i class="iconfont icon-required"></i>
            </div>
            <div>
                <input type="number"
                       placeholder="请输入"
                       v-model="CheckValue">
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>职业接触限值</label>
                <i class="iconfont icon-required"></i>
            </div>
            <div>
                <input type="number"
                       placeholder="请输入"
                       v-model="OccContactImpose">
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>监测负责人</label>
                <i class="iconfont icon-required"></i>
            </div>
            <div class="equipment-right-select"
                 @click="monitoringUserPropShow = true">
                <span>{{userObj.name?userObj.name:'请选择'}}</span>
                <i class="iconfont icon-jinru rightmsg"></i>
            </div>
        </div>
        <div class="form-item form-item-style1">
            <div class="label-title">
                <label>是否超标</label>
                <i class="iconfont icon-required"></i>
            </div>
            <div>
                <p>{{isCb}}</p>
            </div>
        </div>
        <div class="btns">
            <button class="green width200"
                    @click="submit">提交</button>
        </div>
        <activityCompany :selectCompany="selectCompany"
                         :companyPropShow="companyPropShow"></activityCompany>
        <monitoringAreaProp :selectAreaPropShow="selectAreaPropShow"
                            :selectAreaFn="selectAreaFn"></monitoringAreaProp>
        <hazardFactorsProp :factorsPropShow="factorsPropShow"
                           :selectFactorsFn="selectFactorsFn"></hazardFactorsProp>
        <monitoringUserProp :monitoringUserPropShow="monitoringUserPropShow"
                            :selectUserFn="selectUserFn"></monitoringUserProp>
        <myMenu></myMenu>
    </div>
</template>
<script>
import formatDate from '@/utils/formatDate'
import myMenu from '@/commonComponents/menu'
import activityCompany from '@/commonComponents/activityCompany'
import monitoringAreaProp from '@/commonComponents/monitoringAreaProp' // 区域选择
import hazardFactorsProp from '@/commonComponents/hazardFactorsProp' // 职业病危害因素
import monitoringUserProp from '@/commonComponents//monitoringUserProp' // 监测负责人
export default {
    name: 'addMonitoring',
    components: {
        myMenu,
        monitoringAreaProp,
        activityCompany,
        hazardFactorsProp,
        monitoringUserProp
    },
    data () {
        return {
            userInfo: {},
            startDate: formatDate(),
            endDate: formatDate(),
            companyPropShow: false,
            selectAreaPropShow: false,
            deptname: '',
            deptId: '',
            areaName: '', //  区域
            factorsPropShow: false,
            harmvalue: '', // 职业病危害因素
            monitoringUserPropShow: false,
            userObj: {},
            CheckAddress: '', // 采样/测量地点
            CheckIndex: '', // 测量指标
            CheckValue: '', // 测量值
            OccContactImpose: '' // 职业接触限值
        }
    },
    computed: {
        isCb () {
            if (parseFloat(this.CheckValue).toString() !== 'NaN' && parseFloat(this.OccContactImpose).toString() !== 'NaN') {
                if (parseFloat(this.CheckValue) > parseFloat(this.OccContactImpose)) {
                    return '超标'
                } else {
                    return '合格'
                }
            } else {
                return ''
            }
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.deptname = this.userInfo.deptname
        this.deptId = this.userInfo.deptid
    },
    methods: {
        selectCompany (item) {
            this.companyPropShow = false
            console.log(item)
            this.deptname = item.deptName
            this.deptId = item.deptId
        },
        selectAreaFn (item) {
            this.selectAreaPropShow = false
            this.areaName = item.AreaName
        },
        selectFactorsFn (item) {
            this.factorsPropShow = false
            this.harmvalue = item.Harmvalue
        },
        selectUserFn (item) {
            this.monitoringUserPropShow = false
            this.userObj = item
        },
        submit () {
            if (!this.areaName) {
                this.$vux.toast.text('请选择区域')
                return false
            } else if (!this.harmvalue) {
                this.$vux.toast.text('请选择职业病危害因素')
                return false
            } else if (!this.CheckAddress) {
                this.$vux.toast.text('请输入采样/测量地点')
                return false
            } else if (!this.CheckIndex) {
                this.$vux.toast.text('请选择测量指标')
                return false
            } else if (parseFloat(this.CheckValue).toString() === 'NaN') {
                this.$vux.toast.text('请输入测量值,且只能为数字')
                return false
            } else if (parseFloat(this.OccContactImpose).toString() === 'NaN') {
                this.$vux.toast.text('请输入职业接触限值,且只能为数字')
                return false
            } else if (!this.userObj.name) {
                this.$vux.toast.text('请选择监测负责人')
                return false
            }
            let param = {
                'allowPaging': true,
                'business': 'submitOccHealthSup',
                'data': {
                    'Aera': this.areaName, // --区域
                    'CheckAddress': this.CheckAddress, // --采样/测量地点
                    'CheckFzr': this.userObj.name, // --监测负责人
                    'CheckIndex': this.CheckIndex, // --测量指标
                    'CheckValue': this.CheckValue, // --测量值
                    'EndCheckDate': this.endDate, // --结束监测时间
                    'OccContactImpose': this.OccContactImpose, // --职业接触限值
                    'OccHealthHarm': this.harmvalue, // --职业病危害因素
                    'ProjectId': this.deptId, // --单位ID
                    'ProjectName': this.deptname, // --单位名称
                    'StaterCheckDate': this.startDate, // --开始监测时间
                    'isCb': this.isCb // --是否超标
                },
                'method': 'new',
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': '',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then((res) => {
                if (res.data.code === 0) {
                    this.$vux.toast.text('提交成功')
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 500)
                }
            })
        }
    }
}
</script>
<style scoped>
.rightmsg {
    color: #999;
}
.form-item input[type='number'] {
    text-align: right;
    font-size: 14px;
    color: #999;
}
</style>
